<template>
  <div class="contact box bg clmcenter">
    <div class="btn_contact btn_goback" @click="goBack">
      <span>返 回</span>
    </div>
    <div class="contact_container clmcenter">
      <p class="title">联系我们</p>
      <div class="from_container clmstart">
        <form class="contact_form">
          <div class="form_item">
            <label>姓名</label>
            <input type="text" v-model="uname" />
          </div>
          <div class="form_item">
            <label>公司</label>
            <input type="text" v-model="ucompany" />
          </div>
          <div class="form_item">
            <label>手机</label>
            <input type="tel" maxlength="11" v-model="utel" />
          </div>
          <div class="form_item">
            <label>邮箱</label>
            <input type="email" v-model="uemail" />
            <span>（选填）</span>
          </div>
          <div class="form_item">
            <label>行业</label>
            <input
              type="text"
              class="select"
              v-model="uindustry"
              readonly
              @click="showIndustry = true"
            />
            <van-popup
              v-model="showIndustry"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="industryList"
                @confirm="industryConfirm"
                @cancel="showIndustry = false"
              />
            </van-popup>
          </div>
          <div
            class="form_item other_item"
            v-if="uindustry == '其他（请注明）'"
          >
            <!-- 其他行业 -->
            <input
              type="text"
              v-model="uindustry_other"
              placeholder="请输入行业名称"
            />
          </div>
          <div class="form_item">
            <label>职能</label>
            <input
              type="text"
              class="select"
              v-model="urole"
              readonly
              @click="showRole = true"
            />
            <van-popup
              v-model="showRole"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="roleList"
                @confirm="roleConfirm"
                @cancel="showRole = false"
              />
            </van-popup>
          </div>
          <div class="form_item other_item" v-if="urole == '其他（请注明）'">
            <!-- 其他职能 -->
            <input
              type="text"
              v-model="urole_other"
              placeholder="请输入职能名称"
            />
          </div>
          <div class="form_item">
            <label>和凯密特尔关系</label>
            <input
              type="text"
              class="select"
              v-model="urelation"
              readonly
              @click="showRelation = true"
            />
            <van-popup
              v-model="showRelation"
              position="bottom"
              get-container="#app"
            >
              <van-picker
                title=""
                show-toolbar
                item-height="70"
                :columns="relationList"
                @confirm="relationConfirm"
                @cancel="showRelation = false"
              />
            </van-popup>
          </div>
          <!-- 其他关系 -->
          <div
            class="form_item other_item_relations"
            v-if="urelation == '其他（请注明）'"
          >
            <input
              type="text"
              v-model="urelation_other"
              placeholder="请输入关系名称"
            />
          </div>
          <div class="form_item">
            <label>您的需求</label>
            <textarea cols="30" rows="3" v-model="udemand"></textarea>
          </div>
        </form>
        <div class="btn_contact btn_submit" @click="submitContactInfo">
          <span>确认提交</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      uname: "",
      ucompany: "",
      utel: "",
      uemail: "",
      uindustry: "",
      uindustry_other: "", // 其他行业名称
      urole: "",
      urole_other: "", // 其他职能
      urelation: "",
      urelation_other: "", // 其他关系
      udemand: "",
      showIndustry: false,
      industryList: [
        "汽车",
        "航空航天",
        "电力电气",
        "建筑建材",
        "通用设备",
        "金属制造",
        "农林牧渔",
        "其他（请注明）",
      ],
      showRole: false,
      roleList: [
        "技术/研发",
        "销售",
        "市场",
        "采购",
        "供应链",
        "管理",
        "其他（请注明）",
      ],
      showRelation: false,
      relationList: [
        "客户（潜在客户）",
        "原材料供应商",
        "设备生产商",
        "涂料生产商",
        "行业协会/媒体/高校",
        "其他（请注明）",
      ],
      id: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
  },
  methods: {
    // 行业 确认
    industryConfirm(val) {
      this.uindustry = val;
      this.showIndustry = false;
    },
    // 角色 确认
    roleConfirm(val) {
      this.urole = val;
      this.showRole = false;
    },
    // 关系 确认
    relationConfirm(val) {
      this.urelation = val;
      this.showRelation = false;
    },
    // 提交
    async submitContactInfo() {
      if (
        this.uname == "" ||
        this.ucompany == "" ||
        this.utel == "" ||
        this.uindustry == "" ||
        this.urole == "" ||
        this.urelation == "" ||
        this.udemand == ""
      ) {
        return Toast("请将必填信息填写完整");
      }
      if (!/^1[3456789]\d{9}$/.test(this.utel)) {
        return Toast("请输入正确的手机号");
      }
      Toast.loading({
        message: "提交中...",
        forbidClick: true,
        duration: 0,
        overlay: true,
      });
      let timestamp = this.getTimestamp();
      let mdtxt = this.$md5(
        `ehaj8eynamzi0o1y2namnz_${timestamp}`
      ).toLowerCase();
      let params = {
        timestamp,
        sign: mdtxt.substring(5, 15),
        username: this.uname,
        company: this.ucompany,
        phone: this.utel,
        email: this.uemail,
        industry: this.uindustry + "/" + this.uindustry_other,
        job: this.urole + "/" + this.urole_other,
        relationship: this.urelation + "/" + this.urelation_other,
        demand: this.udemand,
        version: "中文",
      };
      let res = await this.$http.post("/register", params);
      Toast.clear();
      if (res.data.code == 200) {
        Toast("信息提交成功！");
        this.goBack();
      } else {
        Toast(res.data.msg);
      }
    },
    // 返回
    goBack() {
      // 隐藏场景控制
      this.$store.commit("updateCnScenceCtrlShow", false);
      this.$router.replace(`/cn/lab/${this.id}`);
    },
    // 获取当前秒级时间戳
    getTimestamp() {
      let date = new Date();
      let time = parseInt(date.getTime() / 1000);
      return time;
    },
  },
};
</script>
<style lang="less" scoped>
.contact {
  font-size: 1.7rem;
  font-family: "SourceHanSansCN";
  font-weight: normal;
  .contact_container {
    position: relative;
    width: 670px;
    height: 1030px;
    background: url("@/assets/img/contactbg.png") no-repeat center center;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 2rem;
    .title {
      position: absolute;
      top: 0.5rem;
      right: 2rem;
      letter-spacing: 0.3rem;
      font-weight: bold;
    }
    .from_container {
      position: relative;
      width: 100%;
      height: 85%;
      margin-top: 3rem;
      overflow-y: scroll;
      .contact_form {
        .form_item {
          width: 100%;
          margin-bottom: 2rem;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          label {
            padding-right: 1rem;
          }
          input,
          textarea {
            border-style: none;
            border: 0;
            background: #ffffff;
            border-radius: 10px;
            font-size: 1.6rem;
            color: #000000;
          }
          input {
            width: 380px;
            height: 55px;
            text-indent: 1rem;
          }
          input.select {
            cursor: pointer;
            background: #ffffff url("@/assets/img/icon.png") no-repeat right
              center;
            background-size: 4% auto !important;
            background-position: right 4% top 1.5rem;
          }
          textarea {
            width: 430px;
            height: 100px;
            padding: 1rem;
          }
          span {
            color: #999999;
            font-size: 1.4rem;
          }
        }
        .form_item:last-child {
          align-items: flex-start;
        }
        .other_item {
          input {
            margin-left: 4.5rem;
          }
        }
        .other_item_relations {
          justify-content: flex-end;
        }
      }
      .btn_submit {
        margin-top: 1rem;
      }
    }
  }
  .btn_contact {
    display: table;
    background: #22a0d4;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 2rem;
  }
  .btn_goback {
    align-self: flex-start;
    margin: 2rem 0 1rem 2.5rem;
    padding: 0.3rem 3rem;
  }
}
@media only screen and (min-height: 1350px) {
  .contact {
    .contact_container {
      margin-bottom: 4rem;
    }
  }
}
@media only screen and (min-height: 1440px) {
  .contact {
    .btn_goback {
      margin-bottom: 2rem;
    }
    .contact_container {
      margin-bottom: 6rem;
    }
  }
}
</style>
<style>
.van-picker__cancel,
.van-picker__confirm,
.van-picker__title,
.van-picker-column {
  font-size: 2rem !important;
}
.van-picker__title {
  line-height: 36px !important;
}
.van-picker__toolbar {
  height: 70px !important;
}
.van-radio {
  align-items: flex-start !important;
}
.van-radio__label {
  line-height: 1.2 !important;
}
</style>
